<template>
  <div class="pic-preview-wrapper">
    <div class="zoom-wrapper">
      <div
        v-if="productDetail.product.start_status == 0 || productDetail.product.start_status == 1 && productDetail.product.open_time_left > 0"
        class="countdown-box"
      >
        <span>代理即将开始：</span>
        <Countdown
          v-if="productDetail.product.start_status == 0 || productDetail.product.start_status == 1 && productDetail.product.open_time_left > 0"
          :endTime="productDetail.product.open_time_left"
          :callback="countdownCallback"
          :endText="endText"
        ></Countdown>
      </div>
      <pic-zoom v-loading="imgLoading" :src="imgurl" :configs="{width:495,height:420,scale: 3}"></pic-zoom>
    </div>
    <!-- <div class="preview-wrapper" v-show="imagesList"> -->
    <div class="preview-wrapper">
      <!-- <div class="prev-wrapper" @click="prevPic">
        <i class="el-icon-arrow-left"></i>
      </div>-->
      <div class="preview-box">
        <ul class="preview-list" ref="previewList">
          <li
            :class="{'curr':selectCurr == index}"
            v-for="(item,index) in imagesList"
            :key="index"
            @click="changeImage(index)"
          >
            <img :src="item" />
          </li>
        </ul>
      </div>
      <!-- <div class="next-wrapper" @click="nextPic">
        <i class="el-icon-arrow-right"></i>
      </div>-->
    </div>
  </div>
</template>
<script>
import PicZoom from "./pic-zoom";
import Countdown from "./count-down";
export default {
  props: {
    imagesList: {
      type: Array
    },
    productDetail: {
      type: Object
    }
  },
  data() {
    return {
      imgurl: require("@/assets/hall/mall_default.jpg"),
      selectCurr: 0,
      imgLoading: false,
      endText: "已开始"
    };
  },
  created() {
    console.log("商品详情", this.productDetail);
  },
  watch: {
    imagesList(oldVal, nowVal) {
      this.initFirPreviewPic();
    }
  },
  methods: {
    countdownCallback() {
      this.$emit("getData");
      console.log("重新请求数据");
    },
    changeImage(index) {
      this.imgurl = "";
      this.imgLoading = true;
      this.selectCurr = index;
      setTimeout(() => {
        this.imgurl = this.imagesList[this.selectCurr];
        this.imgLoading = false;
      }, 1000);
    },
    initFirPreviewPic() {
      if (this.imagesList.length == 0) {
        this.imagesList.push(require("@/assets/hall/mall_default.jpg"));
      }
      this.imgurl = this.imagesList[this.selectCurr];
    },
    prevPic() {
      if (this.previewCurr <= 0) return;
      this.previewCurr--;
      this.$refs.previewList.style.transform = `translateX(${-100 *
        this.previewCurr}px)`;
    },
    nextPic() {
      if (this.previewCurr >= this.imagesList.length - 3) return;
      this.previewCurr++;
      this.$refs.previewList.style.transform = `translateX(${-100 *
        this.previewCurr}px)`;
    }
  },
  components: {
    PicZoom,
    Countdown
  }
};
</script>
<style lang="scss" scoped>
.pic-preview-wrapper {
  width: 495px;
  .zoom-wrapper {
    width: 495px;
    height: 420px;
    position: relative;
    .countdown-box {
      background: rgba(255, 103, 21, 0.75);
      color: #fff;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 88;
      width: 495px;
      text-align: center;
      .countdown-wrap {
        display: inline-block;
        font-size: 16px;
      }
    }
  }
  .prev-wrapper,
  .next-wrapper {
    line-height: 100px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ececec;
    box-sizing: border-box;
    position: absolute;
    z-index: 9;
    background: #fff;
  }
  .prev-wrapper {
    left: 0;
  }
  .next-wrapper {
    right: 0;
  }
  .preview-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    .preview-box {
      flex: 1;
      overflow: hidden;
      margin-top: 18px;
      .preview-list {
        font-size: 0;
        white-space: nowrap;
        padding: 0;
        transition: all 0.3s ease-in-out;
        margin-left: -4px;
        li {
          display: inline-block;
          width: 84px;
          height: 84px;
          padding: 4px;
          box-sizing: border-box;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
          &.curr {
            img {
              border: 2px solid #ff7f5b;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
}
</style>